<template>
	<view class="pages-order" v-if="detail.id">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="订单详情" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		
		<view class="detail-status fill-base flex-y-center">
			<view class="" style="padding-left: 50rpx;">
				<view v-if="refund == 1" class="f-sm-title text-bold" :style="{color: primaryColor}">{{refundType[detail.refund.status].name}}</view>
				<view v-else class="f-sm-title text-bold" :style="{color: primaryColor}">{{statusType[detail.status].name}}</view>
				<block v-if="refund == 0">
					<view class="f-paragraph" v-if="detail.status == 1">请支付后服务人员接单</view>
					<view class="f-paragraph" v-if="detail.status == 2">等待师傅接单</view>
				</block>
			</view>
		</view>
		<!--退款信息-->
		<block v-if="detail.refund">
			<view class="mt-md fill-base pd-lg pr-lg pt-md pb-lg" >
				<view class="pt-md pb-md flex-between" v-if="detail.refund.refund_code">
					<text class="f-paragraph c-mini-title">退款编号</text>
					<view class="flex-center">
						<text class="f-desc c-icontext pr-sm">{{detail.refund.refund_code}}</text>
						<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: detail.refund.refund_code,openType: 'copy'})"
						:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
					</view>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">申请退款金额</text>
					<text class="f-desc c-warning">￥{{detail.refund.apply_price}}</text>
				</view>
				<!-- 审核通过才有退款时间 -->
				<view class="pt-md pb-md flex-between" v-if="detail.refund.status == 2">
					<text class="f-paragraph c-mini-title">退款时间</text>
					<text class="f-desc c-icontext">{{$util.formatTime(detail.refund.refund_time*1000, '')}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">取消方式</text>
					<text class="f-desc c-icontext">{{detail.cancel_type == 1 ? '用户取消' : '后台取消'}}</text>
				</view>
				<view class="pt-md pb-md flex" v-if="detail.refund.content">
					<text class="f-paragraph c-mini-title">退款说明</text>
					<view class="flex-1 flex" style="justify-content: flex-end;">
						<text class="f-desc c-icontext max-500 ">{{detail.refund.content}}</text>
					</view>
				</view>
				<view class="pb-md flex" v-if="detail.refund.text">
					<text class="f-paragraph c-mini-title">退款详情描述</text>
					<view class="flex-1 flex" style="justify-content: flex-end;">
						<text class="f-desc c-icontext max-500 pre-wrap">{{detail.refund.text}}</text>
					</view>
				</view>
			</view>
			<view class="mt-md fill-base pd-lg pr-lg pt-md pb-lg">
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">售后状态</text>
					<text class="f-desc c-icontext">已退款</text>
				</view>
				<view class="pt-md pb-md flex-between" v-if="detail.refund.status == 2">
					<text class="f-paragraph c-mini-title">退款金额</text>
					<text class="f-desc c-warning">￥{{detail.refund.refund_price}}</text>
				</view>
				<view class="pt-md pb-md flex-between" v-if="detail.refund.status == 2">
					<text class="f-paragraph c-mini-title">退款方式</text>
					<text class="f-desc c-icontext">原路退回</text>
				</view>
				<view class="pt-md pb-md flex-between" v-if="detail.refund.status == 2">
					<text class="f-paragraph c-mini-title">退款状态</text>
					<text class="f-desc c-icontext">退款成功</text>
				</view>
			</view>
		</block>
		<!-- <view class="mt-md fill-base pl-lg pr-lg pb-sm" v-if="detail.coach_id">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">接单人信息</text>
			</view>
			<view class="flex-between pt-md pb-md">
				<image :src="detail.coach_info.work_img" mode="aspectFill" class="detail-image"></image>
				<view class="flex-center">
					<view class="f-title">{{detail.coach_info.name}}</view>
				</view>
			</view>
		</view> -->
		<view class="mt-md fill-base pl-lg pr-lg pb-sm">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">预约时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.start_time*1000, 'YY-M-D h:m')}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">联系人姓名</text>
				<view class="flex-center">
					<text class="f-desc c-icontext ">{{detail.address_info.user_name}}</text>
				</view>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">联系电话</text>
				<!-- <text class="f-desc c-icontext">{{detail.address_info.mobile}}</text> -->
				<view class="flex-center">
					<i class="iconfont icondianhua" @tap="callPhone(detail.address_info.mobile)"></i>
				</view>
			</view>
			<view class="pt-md pb-md flex">
				<text class="f-paragraph c-mini-title">服务地址</text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500" >{{detail.address_info.address + detail.address_info.address_info}}</text>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg flex-between" v-for="(item,index) in detail.order_goods" :key="index">
			<image :src="item.image" mode="aspectFill" class="radius-16 order-image"></image>
			<view class="flex-1 pl-md">
				<view class="f-title text-bold">{{item.name}}</view>
				<view class="f-caption c-caption pt-sm pb-sm">{{item.f_name + '/' + item.s_name}}</view>
				<view class="flex-between">
					<view class="f-caption c-caption">{{item.title}}</view>
					<view class=" c-warning f-paragraph">￥{{item.price}}</view>
				</view>
				
			</view>
		</view>
		<view class="mt-md fill-base pd-lg pr-lg pt-md pb-lg">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">订单编号</text>
				<view class="flex-center">
					<text class="f-desc c-icontext pr-sm">{{detail.order_code}}</text>
					<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: detail.order_code,openType: 'copy'})"
					:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
				</view>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">下单时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.create_time*1000, '')}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">上门费</text>
				<text class="f-desc c-warning">￥{{detail.door_money || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">服务费</text>
				<text class="f-desc c-warning ">￥{{detail.price || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付金额</text>
				<text class="f-desc c-warning">￥{{Number((detail.price*1 + detail.door_money*1).toFixed(2))}}</text>
			</view>
			<view class="pt-md pb-md flex" v-if="detail.text">
				<text class="f-paragraph c-mini-title">订单备注</text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500 pre-wrap">{{detail.text}}</text>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pr-lg pl-lg pt-sm pb-sm" v-if="detail.order_pay_img">
			<view class="f-paragraph c-mini-title pt-md pb-md">上门回收付款凭证</view>
			<view class="">
				<upload :imagelist="detail.order_pay_img" text="上传图片" :imageSee="true"
					:imgsize="detail.order_pay_img.length" :pictureSize="5">
				</upload>
			</view>
		</view>
		<view class="mt-md fill-base pr-lg pl-lg pt-sm pb-sm" v-if="detail.order_check_img">
			<view class="f-paragraph c-mini-title pt-md pb-md">服务完成凭证</view>
			<view class="">
				<upload :imagelist="detail.order_check_img" text="上传图片" :imageSee="true"
					:imgsize="detail.order_check_img.length" :pictureSize="5">
				</upload>
			</view>
		</view>
		<!-- <view class="mt-md fill-base pr-lg pl-lg pt-sm pb-sm">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付方式</text>
				<text class="f-desc c-icontext">{{payModel[detail.pay_model]}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付金额</text>
				<text class="f-desc c-warning text-bold">¥{{detail.pay_price}}</text>
			</view>
		</view> -->
		<!-- <view class="mt-md fill-base pd-lg pr-lg pt-md pb-lg" v-if="detail.refund">
			<view class="pt-md pb-md flex-between" v-if="detail.refund.refund_code">
				<text class="f-paragraph c-mini-title">退款编号</text>
				<view class="flex-center">
					<text class="f-desc c-icontext pr-sm">{{detail.refund.refund_code}}</text>
					<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: detail.refund.refund_code,openType: 'copy'})"
					:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
				</view>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">退款时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.refund.create_time*1000, '')}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">取消方式</text>
				<text class="f-desc c-icontext">{{detail.cancel_type == 1 ? '用户取消' : '后台取消'}}</text>
			</view>
			<view class="pt-md pb-md flex" v-if="detail.refund.content">
				<text class="f-paragraph c-mini-title">退款说明</text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500 ">{{detail.refund.content}}</text>
				</view>
			</view>
			<view class="pb-md flex" v-if="detail.refund.text">
				<text class="f-paragraph c-mini-title"></text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500 pre-wrap">{{detail.refund.text}}</text>
				</view>
			</view>
		</view> -->
		
		<!--补差价-->
		<block v-if="detail.add_price_list">
			<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
				<block v-for="(item,index) in detail.add_price_list" :key="index">
					<view class="pt-md pb-md flex-between">
						<text class="f-paragraph c-mini-title">补差价订单编号</text>
						<view class="flex-center flex-1 pl-lg">
							<text class="f-desc c-icontext pr-sm flex-1" style="word-break:break-all">{{item.order_code}}</text>
							<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: item.order_code,openType: 'copy'})"
							:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
						</view>
					</view>
					<view class="pt-md pb-md flex-between">
						<text class="f-paragraph c-mini-title">补单时间</text>
						<text class="f-desc c-icontext">{{$util.formatTime(item.create_time*1000, '')}}</text>
					</view>
					<view class="pt-md pb-md flex-between">
						<text class="f-paragraph c-mini-title">补单类型</text>
						<text class="f-desc c-icontext">{{item.text}}</text>
					</view>
					<view class="pt-md pb-md flex-between" v-if="item.text_info">
						<text class="f-paragraph c-mini-title">补单备注</text>
						<text class="f-desc c-icontext">{{item.text_info}}</text>
					</view>
				</block>
			</view>
			<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">补单支付方式</text>
					<text class="f-desc c-icontext">微信支付</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">支付金额</text>
					<text class="f-desc c-warning">￥{{detail.add_price_list[0].pay_price}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">支付状态</text>
					<text class="f-desc c-icontext">支付成功</text>
				</view>
			</view>
			<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
				<view class="pt-md pb-md f-title text-bold c-title">支付明细</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">订单金额总计</text>
					<text class="f-desc c-warning text-bold">￥{{Number((detail.price*1 + detail.door_money*1).toFixed(2))}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">补单金额总计</text>
					<text class="f-desc c-warning text-bold">￥{{detail.add_price_list[0].pay_price}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">支付金额总计</text>
					<text class="f-title c-warning text-bold">￥{{Number((detail.add_price_list[0].pay_price*1 + detail.price*1 + detail.door_money*1).toFixed(2))}}</text>
				</view>
			</view>
		</block>
		
		<uni-popup ref="order_box" type="center" :custom="true">
			<view class="order-box fill-base pl-lg pr-lg radius-16 pt-md pb-lg">
				<block v-if="form.order_type == 2">
					<view class="f-title flex-center h-80 text-bold rel">服务完成
						<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
					</view>
					<view class="f-paragraph text-bold pb-lg pt-lg">上传付款凭证</view>
					<view class="pb-lg flex-center">
						<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.image" imgtype="image" text="上传图片" :imgsize="9"
							:pictureSize="5" imgclass="mini">
						</upload>
					</view>
					<view class="flex-center pb-lg">
						<view class="radius-10 service-btn flex-center f-desc"
						:style="{color: `#fff`, background: primaryColor}" 
						@tap.stop="changeOrder('service')">服务完成</view>
					</view>
				</block>
				<block v-else>
					<view class="f-title flex-center h-80 text-bold rel">验收
						<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
					</view>
					<view class="f-paragraph text-bold pb-lg pt-lg">输入验收码</view>
					<view class="pb-lg flex-center">
						<view class="">
							<xt-verify-code v-model="form.check_code" :size="4" cursorColor="#fff"></xt-verify-code>
						</view>
					</view>
					<block v-if="configInfo.coach_end_order_upload">
						<view class="f-paragraph pb-lg pt-lg">请上传完成图片</view>
						<view class="pb-lg flex-center">
							<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.order_check_img" imgtype="order_check_img" text="上传图片" :imgsize="9"
								:pictureSize="5" imgclass="mini">
							</upload>
						</view>
					</block>
					<view class="flex-center pb-lg pt-lg">
						<view class="radius-10 service-btn flex-center f-desc"
						:style="{color: `#fff`, background: primaryColor}" 
						@tap.stop="changeOrder('service')">确定</view>
					</view>
				</block>
			</view>
		</uni-popup>
		
		<view class="space-max-footer"></view>
		<fixed position="bottom" :zIndex="99" v-if="[3,4,5,6].includes(detail.status) && refund == 0">
			<view class="fill-base pl-lg pr-lg b-1px-t">
				<view class="flex-y-center pt-md pb-md" style="justify-content: flex-end;">
					<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md"
					:style="{border: `1px solid ${primaryColor}`, color: primaryColor}" v-if="[6].includes(detail.status) && !detail.add_price_list && detail.order_type == 1"
					@tap.stop="setDifference">{{detail.is_add == 1 ? `查看补差价` : `申请补差价`}}</view>
					<view class="radius-10 order-btn cancel-btn flex-center f-desc" v-if="detail.status == 3 && detail.can_cancel == 1" 
					@tap.stop="changeOrder('cancel')">取消订单</view>
					<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md"
					:style="{color: `#fff`, background: primaryColor}" 
					@tap.stop="changeOrder('')">{{statusButton[detail.status]}}</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</fixed>
		<!-- #ifdef APP-PLUS -->
			<openAuth type="phone" ref="app_check_item"></openAuth>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import xtVerifyCode from "@/components/xt-verify-code"
	import openAuth from "@/components/open-auth.vue"
	
	export default {
		components: {
			xtVerifyCode,
			openAuth
		},
		data() {
			return {
				statusType: {
					'-2': {name: '已退款', color: '#FF2404'},
					'-1': {name: '已退款', color: '#FF2404'},
					3: {name: '待上门', color: '#F36905'},
					4: {name: '已出发', color: '#F36905'},
					5: {name: '待开始', color: '#19C865'},
					6: {name: '服务中', color: '#19C865'},
					7: {name: '服务完成', color: '#19C865'},
					8: {name: '订单完成', color: '#999999'}
				},
				statusButton: {
					3: '马上出发',
					4: '已到达',
					5: '开始服务',
					6: '服务完成',
					7: '订单完成'
				},
				refundType: {
					1: {name: '正在退款中，等待后台审核', color: '#FF2404', oldName: '审核中'},
					2: {name: '审核通过 ，已退款', color: '#24C858', oldName: '审核通过'},
					3: {name: '退款失败', color: '#666666', oldName: '审核失败'}
				},
				options: {},
				lockTap: false,
				detail: {
					coach_info: {}
				},
				payModel: {
					1: '微信支付'
				},
				refund: 0,
				form: {
					image: [],
					id: '',
					status: '',
					order_type: 2,
					check_code: '',
					order_check_img: []
				},
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			coachInfo: state => state.user.coachInfo,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.refund = options.refund 
			this.initIndex()
		},
		onShow() {
			// #ifdef APP-PLUS
			this.$util.isCheckAuth({type: 'phone'}).then(res => {
				console.log(res , '========> phone')
				if(!res){
					this.$refs.app_check_item.close()
				}
			})
			// #endif
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					this.getConfigInfo()
				}
				this.getOrderInfo()
			},
			initRefresh(){
				this.$util.showLoading()
				this.initIndex(true)
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			async getOrderInfo(){
				let module = this.refund == 0 ? 'orderInfo' : 'refundInfo'
				let data = await this.$api.order[module]({id: this.options.id})
				if(data.order_pay_img){
					data.order_pay_img = data.order_pay_img.split(',').map(item => {
						return {path: item}
					})
				}
				if(data.order_check_img){
					data.order_check_img = data.order_check_img.split(',').map(item => {
						return {path: item}
					})
				}
				this.detail = data
				if( data.order_type == 1){
					this.statusButton[6] = '输入验收码'
				}
				this.$util.hideAll()
			},
			// 补差价
			setDifference(){
				let {
					id,
					is_add = 0
				} = this.detail
				this.$util.goUrl({url: `/demand/pages/order/difference?id=${id}&type=1&is_add=${is_add}`})
			},
			async changeOrder(type = ''){
				let {
					id,
					status,
					order_type,
					is_add = 0
				} = this.detail
				let param = {
					id,
					status
				}
				
				if(status == 3){ // 待上门
					param.status = 4
				}else if(status == 4){ // 已出发
					param.status = 5
				}else if(status == 5){ // 待开始
					param.status = 6
				}else if(status == 6){ // 服务中
					this.form.order_type = order_type
					if(order_type == 2 && !type){ // 需要上传图片  上门回收
						this.form.id = id
						this.form.status = 7
						this.$refs.order_box.open()
						return
					}else if(order_type == 1 && !type){
						if(is_add == 1){
							this.$util.showToast({
								title: '补完差价才能输入验收码'
							})
							return
						}
						this.form.id = id
						this.form.status = 7
						this.$refs.order_box.open()
						return
					}
					//param.status = 8
				}
				if(type == 'cancel'){
					// param.status = 2
					// let [res_del, {
					// 	confirm
					// }] = await uni.showModal({
					// 	content: `请确认是否要取消订单`,
					// })
					// if (!confirm) return;
					this.callPhone(this.coachInfo.service_tel)
					// this.$util.goUrl({openType: 'call', url: this.coachInfo.service_tel})
					return
				}
				if(type == 'service'){
					let form = this.$util.deepCopy(this.form)
					if(form.order_type == 2){
						if(form.image.length == 0){
							this.$util.showToast({
								title: '请上传付款凭证'
							})
							return
						}
						param.order_pay_img = form.image.map(item => {
							return item.path
						})
					}else{
						let {
							check_code = ''
						} = form
						if(check_code.length != 4){
							this.$util.showToast({
								title: '请输入验收码'
							})
							return
						}
						if(form.order_check_img.length > 0){
							param.order_check_img = form.order_check_img.map(item => {
								return item.path
							})
						}
						param.check_code = check_code
						param.status = 7
					}
				}
				console.log(param, '===========> param')
				this.$util.showLoading()
				await this.$api.order.updateOrder(param)
				if(type == 'service'){
					this.$refs.order_box.close()
				}
				this.$util.hideAll()
				this.$util.showToast({
					title: param.status == 2 ? '取消成功' : '操作成功'
				})
				this.getOrderInfo()
				setTimeout(()=>{
					this.$util.back()
					if(type == 'cancel'){
						this.$util.goUrl({url: 1 ,openType: 'navigateBack'})
					}
				},1500)
			},
			async callPhone(url){
				// #ifdef APP-PLUS
				let [,data] = await uni.getSystemInfo()
				if(data.platform !== 'ios'){
					this.$util.isCheckAuth({type: 'phone'}).then(res => {
						if(res){
							this.$refs.app_check_item.open()
						}
					})
				}
				// #endif
				uni.makePhoneCall({
					phoneNumber: url,
					success:(res)=>{
						// #ifdef APP-PLUS
						this.$util.isCheckAuth({type: 'phone'}).then(res => {
							console.log(res , '========> phone')
							if(!res){
								this.$refs.app_check_item.close()
							}
						})
						// #endif
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						this.$refs.app_check_item.close()
						// #endif
					}
				})
			}
		},
	}
</script>


<style lang="scss">
	.pages-order {
		.detail-status{
			height: 160rpx;
		}
		.detail-image{
			width: 94rpx;
			height: 94rpx;
			border-radius: 94rpx;
		}
		
		.order-image{
			width: 160rpx;
			height: 160rpx;
		}
		.order-btn{
			min-width: 152rpx;
			height: 62rpx;
			color: #5B5B5B;
		}
		.cancel-btn{
			border: 1px solid #979797;
		}
		.copy-btn{
			border-radius: 4px;
		}
		.order-box{
			width: 690rpx;
			.service-btn{
				width: 222rpx;
				height: 62rpx;
				color: #5B5B5B;
			}
		}
	}
</style>
